<script setup lang="ts">
import LoginForm from './components/LoginForm.vue'
</script>

<template>
   <div class="login">
    <Transition
      appear
      tag="div"
      enter-active-class="animate__animated animate__bounceInLeft">
      <div class="text">
        <h2  >智能运维</h2>
        <h4 >可快速对复杂业务进行精准和快速定位</h4>
      </div>
    </Transition>
    <div class="login-wrap">
      <Transition
        appear
        tag="div"
        enter-active-class="animate__animated animate__bounceInRight">
          <div>
            <img src="@/assets/img/logo.png"  alt=""/>
            <div class="box" >
              <login-form  ></login-form>
            </div>
          </div>
      </Transition>
    </div>
  </div>
</template>

<style scoped lang="less">
.login{
  background: url("../../assets/img/login.jpg") repeat-x  ;
  background-size: cover;
  width: 100%;
  height: 100%;
  .text{
    position: absolute;
    left: 50px;
    top: 50px;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    h2{
      margin-bottom: 10px;
    }
  }

  .login-wrap{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width:600px;
    img{

      position: absolute;
      top: 50px;
      width: 200px;
      right: 30px;
    }

    >div{
      height: 100%;
      background: #050c2280 ;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .box{
        color: rgb(255, 255, 255);
        height: 350px;
        padding: 0 130px ;
      }
    }

  }

}
</style>
